<template>
    <div>
        <div class="pannel-div">
            <Row type="flex"  align="middle">
                <Col span="2"><label>搜索关键字：</label></Col>
                <Col span="6">
                    <Input v-model="filters.name">
                    </Input>
                </Col>
                <Col span="6">
                    <Button class="btn" type="primary" :loading="loading" @click="getData()">
                        <span v-if="!loading">查询</span>
                        <span v-else>查询中...</span>
                    </Button>
                    <Button class="btn" type="success" @click="showModal()">新增</Button>
                </Col>
            </Row>
        </div>
        <div  class="pannel-div" :style="{ position: 'relative'}">
            <Table border :columns="columns" ref="selection"  @on-select="rowSelect($event)" :data="data">
            </Table>
            <div style="width:200px;text-align:center;padding-top:10px;height:30px;line-height:30px">
            <Checkbox :style="{float:'left'}" v-model="single" @on-change="handleSelectAll(single)">全选</Checkbox>
            <Button :style="{float:'left'}" @click="removeConfirm()">删除多个</Button>
            </div>
           <Spin fix v-if="loading">
                <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                <div>查询中...</div>
           </Spin>
        </div>
        <div  class="pannel-div">
            <Page :total="total" show-sizer @on-change="onChange" @on-page-size-change="onPageSizeChange" :page-size-opts=[5,10,15] show-elevator></Page></Page>
        </div>


         <Modal
            v-model="modal"
            :title="getTitile"
            @on-ok="ok"
            @on-cancel="cancel">
           <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="用户名" prop="username">
                    <Input v-model="formValidate.username" placeholder="请输入用户名"></Input>
                </FormItem>
                 <FormItem label="密码" prop="password">
                    <Input type="password" v-model="formValidate.password" placeholder="请输入您的密码"></Input>
                </FormItem>
                <FormItem label="性别" prop="sex">
                    <RadioGroup v-model="formValidate.sex">
                        <Radio label="男">男</Radio>
                        <Radio label="女">女</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="出生日期" prop="date">
                    <DatePicker type="date" placeholder="请选择您的出生日期" v-model="formValidate.date"></DatePicker>
                </FormItem>
                <FormItem label="电话" prop="phone">
                    <Input v-model="formValidate.phone" placeholder="请输入您的电话号码"></Input>
                </FormItem>
                <FormItem label="邮箱" prop="email">
                    <Input v-model="formValidate.email" placeholder="请输入您的邮箱地址"></Input>
                </FormItem>
                <FormItem label="地址" prop="address">
                    <Input v-model="formValidate.address" placeholder="请输入您的邮箱地址"></Input>
                </FormItem>
            </Form>
        </Modal>

         
    </div>
</template>

<script>
import { Base } from "./../Base";
import md5 from 'crypto-js/md5';

export default {
  mixins: [Base],
  data() {
    return {
      module: "users",
      moduleName: "用户",
      formValidate: {
        username: '',
        password: '',
        phone: '',
        email: '',
        sex: '',
        address:'',
        date: ''
      },
       ruleValidate: {
                    username: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' }
                    ],
                    email: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'email', message: '不是合法邮箱格式', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: '请选择出生日期', trigger: 'change' }
                    ]
                },
      columns: [
          {
                        type: 'selection',
                        width: 60,
                        align: 'center'
        },
        {
          title: "姓名",
          key: "username"
        },
        {
          title: "电话",
          key: "phone"
        },
        {
          title: "邮箱",
          key: "email"
        },
        {
          title: "性别",
          key: "sex"
        },
        {
          title: "地址",
          key: "address"
        },
        {
          title: "出生日期",
          key:"date",
           render: function (h, params) {  
            return h('div',   
              new Date(params.row.date).Format('yyyy-MM-dd')); 
          }  
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.showModal(params.row._id);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.removeConfirm(params.row._id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    }
  }
}
</script>

<style>
div.pannel-div{
    padding:15px;
}

.btn{
    margin-left:10px;
}
 .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>